<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>stackshare</title>
	<link rel="stylesheet" href="plugin/bootstrap.css">
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<header>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar navbar-static-top">
						<div class="navbar-header">
							<a href="#" class="navbar-brand"></a>
							<button class="navbar-toggle" type="button">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div>
						<div class="collapse navbar-collapse">
							<ul class="nav navbar-nav" id="desktop">
								<li class="hide-careers"><a href="#">Trending</a></li>
								<li class="hide-careers"><a href="#">Explore</a></li>
								<li class="hide-careers"><a href="#">Posts</a></li>
								<li class="hide-careers"><a href="#">Tools & Services</a></li>
								<li class="hide-careers"><a href="#">Stacks</a></li>
								<li class="hide-careers">
									<a href="#" class="btn btn-ss-gh-alt-home login">
										<span class="icon glyphicon glyphicon-heart"></span>
										<span class="text">Sign up / Login</span>
									</a>
								</li>
							</ul>
							<ul class="nav navbar-nav" id="mobile">
								<li><a href="#" class="btn btn-outline">Trending</a></li>
								<li><a href="#" class="btn btn-outline">Explore</a></li>
								<li><a href="#" class="btn btn-outline">Stacks</a></li>
								<li><a href="#" class="btn btn-outline">Tools & Services</a></li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
		<div class="container hero">
			<div class="row">
				<div class="col-md-6 left">
					<h1 class="home-title">Discover technology stacks and find the best software tools</h1>
					<ul>
						<li>
							<span id="tools"></span>
							Discover new tools and services
						</li>
						<li>
							<span id="stackups"></span>
							See side-by-side comparisons
						</li>
						<li>
							<span id="stacks"></span>
							Share your development stack
						</li>
					</ul>
					<br>
					<button type="button"
						class="btn btn-orange col-md-10 col-md-offset-0 col-sm-offset-2 col-sm-8 col-xs-12">
						Sign Up
					</button>
				</div>
				<div class="col-md-6 right">
					<div
						class="hero-tool col-md-12 col-md-offset-0 col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 no-mob">
						<div class="row">
							<div class="service-logo col-md-2 col-xs-12 center">
								<img src="img/1.png" itemprop="image" alt="">
							</div>
							<div class="stack-name-cat col-md-3 col-xs-12 center">
								<div class="stack-name">
									Docker
								</div>
								<div class="stack-category">
									Containers
								</div>
							</div>
							<div class="stack-stats col-md-7 col-xs-12">
								<div class="row">
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">2.86K</div>
										<div class="stat-name">votes</div>
									</div>
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">1.36K</div>
										<div class="stat-name">fans</div>
									</div>
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">3.85K</div>
										<div class="stack-name">stacks</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div
						class="hero-tool col-md-12 col-md-offset-0 col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 no-mob">
						<div class="row">
							<div class="service-logo col-md-2 col-xs-12 center">
								<img src="img/2.png" itemprop="image" alt="">
							</div>
							<div class="stack-name-cat col-md-3 col-xs-12 center">
								<div class="stack-name">
									Heroku
								</div>
								<div class="stack-category">
									PaaS
								</div>
							</div>
							<div class="stack-stats col-md-7 col-xs-12">
								<div class="row">
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">2.78K</div>
										<div class="stat-name">votes</div>
									</div>
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">1.17K</div>
										<div class="stat-name">fans</div>
									</div>
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">2.64K</div>
										<div class="stack-name">stacks</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div
						class="hero-tool col-md-12 col-md-offset-0 col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 no-mob">
						<div class="row">
							<div class="service-logo col-md-2 col-xs-12 center">
								<img src="img/3.png" itemprop="image" alt="">
							</div>
							<div class="stack-name-cat col-md-3 col-xs-12 center">
								<div class="stack-name">
									Slack
								</div>
								<div class="stack-category">
									Team Messaging
								</div>
							</div>
							<div class="stack-stats col-md-7 col-xs-12">
								<div class="row">
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">4.8K</div>
										<div class="stat-name">votes</div>
									</div>
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">2.32K</div>
										<div class="stat-name">fans</div>
									</div>
									<div class="group col-md-4 col-xs-4">
										<div class="stat-amount">5.66K</div>
										<div class="stack-name">stacks</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</header>
</body>
<!--js部分-->
<script src="plugin/jquery.min.js"></script>
<script src="js/index.js"></script>

</html>